// 导航 开始
function nav() {
    var navLi = document.querySelectorAll('.nav-ul li');
    for (var i = 0; i < navLi.length; i++) {
        navLi[i].onmouseover = navMouseoverHandle;
        navLi[i].onmouseout = navMouseoutHandle;
    }

    function navMouseoverHandle() {
        this.id = 'nav-ul-id';
    }

    function navMouseoutHandle() {
        this.id = '';
    }
}
nav();
// 导航  结束

// 轮播图  开始
function menu() {
    var box = document.querySelector('.carousel');
    var boxWidth = box.offsetWidth;
    var ulObj = box.querySelector('ul');
    var uList = ulObj.querySelectorAll('li');
    // var olObj = box.querySelector('ol');
    var arr = box.querySelector('.carousel-arr');
    var left = arr.querySelector('.left');
    var right = arr.querySelector('.right');

    var pic = 0;
    var olObj = document.createElement('ol');
    box.appendChild(olObj);


    for (var i = 0; i < uList.length; i++) {
        var oList = document.createElement('li');
        olObj.appendChild(oList);
        oList.innerHTML = (i + 1);
        oList.setAttribute('data-index', i);
        oList.onclick = function () {
            for (var j = 0; j < uList.length - 1; j++) {
                olObj.children[j].removeAttribute('class');
            }
            this.className = 'active';
            pic = this.getAttribute('data-index');
            animate(ulObj, -pic * boxWidth);
        };
    }

    olObj.children[0].className = 'active';

    ulObj.appendChild(ulObj.children[0].cloneNode(true));

    uList = ulObj.querySelectorAll('li');

    var timer = setInterval(clickHandle, 1500);

    box.onmouseover = function () {
        arr.style.display = 'block';
        clearInterval(timer);
    };
    box.onmouseout = function () {
        arr.style.display = 'none';
        timer = setInterval(clickHandle, 1500);
    };

    // 右
    right.onclick = clickHandle;

    function clickHandle() {
        // 让ul 里 所有的子元素 的最后 一个 进行比较
        if (pic == uList.length - 1) {
            pic = 0;
            ulObj.style.left = 0 + 'px';
        }
        pic++;
        animate(ulObj, -pic * boxWidth);

        if (pic == uList.length - 1) {
            olObj.children[olObj.children.length - 1].className = '';
            olObj.children[0].className = 'active';
        } else {
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].className = '';
            }
            olObj.children[pic].className = 'active';
        }
    }

    // 左

    left.onclick = function () {
        if (pic == 0) {
            pic = uList.length - 1;
            ulObj.style.left = -pic * boxWidth + 'px';
        }
        pic--;
        animate(ulObj, -pic * boxWidth);

        for (var i = 0; i < olObj.children.length; i++) {
            olObj.children[i].className = '';
        }
        olObj.children[pic].className = 'active';
    }
}
menu();
// 轮播图  结束

// 热门推荐 开始
function popular() {
    var popularAnniu = document.querySelectorAll('.popular-left-top-two a');
    var popularUl = document.querySelectorAll(".popular-left-fonter-ul");
    var num = 0;
    // 添加自定义属性
    for (var i = 0; i < popularAnniu.length; i++) {
        popularAnniu[i].setAttribute("data-index", i);
        popularAnniu[i].onclick = popularonclick;
        popularAnniu[i].onmouseover = popularMouseover;
        popularAnniu[i].onmouseout = popularMouseout;

    }
    // 调用点击后出现的效果
    function popularonclick() {
        for (var j = 0; j < popularAnniu.length; j++) {
            popularAnniu[j].className = "popular-top-a-two";
            popularUl[j].removeAttribute('id');
        }
        this.className = "popular-top-a-one";
        num = this.getAttribute('data-index');
        popularUl[num].id = "popular-left-fonter-ul";
    }
    // 定时器 每1.5秒变换
    var timeId = setInterval(function () {
        for (var j = 0; j < popularAnniu.length; j++) {
            popularAnniu[j].className = "popular-top-a-two";
            popularUl[j].removeAttribute('id');
        }
        if (num == popularAnniu.length - 1) {
            num = -1;
        }
        num++;
        popularAnniu[num].className = "popular-top-a-one";
        popularUl[num].id = "popular-left-fonter-ul";
    }, 1500);
    // 鼠标移入 让定时器停止
    function popularMouseover() {
        clearInterval(timeId);
    }
    // 鼠标移出 让定时器开启
    function popularMouseout() {
        timeId = setInterval(function () {
            for (var j = 0; j < popularAnniu.length; j++) {
                popularAnniu[j].className = "popular-top-a-two";
                popularUl[j].removeAttribute('id');
            }
            if (num == popularAnniu.length - 1) {
                num = -1;
            }
            num++;
            popularAnniu[num].className = "popular-top-a-one";
            popularUl[num].id = "popular-left-fonter-ul";
        }, 1500);
    }
}
popular();
// 热门推荐 结束

// 地区选择 开始
// 左边列表 鼠标进入
function regionLeftUl() {
    var regionLeftA = document.querySelectorAll(".region-left-nav-ul a");
    var regionLeftContentUl = document.querySelectorAll('.region-left-content-ul');
    var regionLeftListP = document.querySelectorAll('.region-left-list p');
    // 增加点击事件 移入事件  移除事件

    for (var i = 0; i < regionLeftA.length; i++) {
        regionLeftA[i].setAttribute('data-regionLeftA', i);
        regionLeftA[i].onclick = regionLeftAonclick;
        regionLeftA[i].onmouseover = regionLeftAonmouseover;
        regionLeftA[i].onmouseout = regionLeftAonmouseout;
    }
    // 点击事件
    function regionLeftAonclick() {
        for (var j = 0; j < regionLeftA.length; j++) {
            // 清楚 列表 class
            regionLeftA[j].className = "";
            // 清楚 列表 id
            regionLeftA[j].id = "";
            // 清楚 ul id
            regionLeftContentUl[j].removeAttribute('id');
            // 清楚class
            regionLeftListP[j].removeAttribute('class');
        }
        // 添加 列表 class
        this.className = "region-left-nav-a";
        // 添加 列表 id
        this.id = "region-left-nav-a";
        // 添加 ul id
        regionLeftContentUl[this.getAttribute('data-regionLeftA')].id = "region-left-content-ul";
        regionLeftListP[this.getAttribute('data-regionLeftA')].className = "region-left-list-p";

    }
    // 移入事件
    function regionLeftAonmouseover() {
        for (var j = 0; j < regionLeftA.length; j++) {
            regionLeftA[j].id = "";
        }
        if (this.className == false) {
            this.id = "region-left-nav-a";
        }
    }
    // 移除事件
    function regionLeftAonmouseout() {
        for (var j = 0; j < regionLeftA.length; j++) {
            regionLeftA[j].id = "";
        }
    }
}
regionLeftUl();
// 左边列表 右边
function regionLeftDiv() {
    // 获取外面div
    var regionNavDiv = document.querySelector('.region-left-nav-div');
    // 获取单独的a
    var regionNavDivId = document.querySelector('.region-left-nav-aa');
    // 获取里面的div
    var regionChengshiTwo = document.querySelector('.region-left-chengshi-two');
    // 添加点击事件
    regionNavDiv.onclick = function (e) {
        // 让 其他城市 的背景图片的位置切换
        regionNavDivId.style.backgroundPositionY = "-39px";
        // 让单独的a 的 字体颜色更换
        regionNavDivId.style.color = "#fff";
        // 点击事件后 让里面的div 样式 显示
        regionChengshiTwo.style.display = 'block';
        // 给它的原因是宽度 小 内容的宽度大  那么他们就不显示 这样就可以显示动画效果
        regionChengshiTwo.style.overflow = 'hidden';
        e.preventDefault();
        //上面的两个是阻止默认事件的
        //下面的两个是阻止事件冒泡的 
        window.event.cancelBubble = true;
        e.stopPropagation();
        // 动画效果
        animate1(regionChengshiTwo, {
            // 高度
            "height": 434
        });
    }
    // 点击文档 隐藏
    document.onclick = function () {
        // 动画效果
        animate1(regionChengshiTwo, {
            // 高度
            "height": 0
        }, function () {
            // 隐藏
            regionChengshiTwo.style.display = "none";
        });
        // 让 其他城市 的背景图片的位置恢复
        regionNavDivId.style.backgroundPositionY = "0";
        // 让单独的a 的 字体颜色恢复
        regionNavDivId.style.color = "#000";
    }
}
regionLeftDiv();


// 右边
function regionRight() {
    var regionAnniu = document.querySelectorAll('.region-header-ul a');
    var regionDiv = document.querySelectorAll(".region-right-div");
    var num = 0;
    // 添加自定义属性
    for (var i = 0; i < regionAnniu.length; i++) {
        regionAnniu[i].setAttribute("data-index", i);
        regionAnniu[i].onclick = regiononclick;

        regionAnniu[i].onmouseover = regionMouseover;
        regionAnniu[i].onmouseout = regionMouseout;

    }
    // 调用点击后出现的效果
    function regiononclick() {
        for (var j = 0; j < regionAnniu.length; j++) {
            regionAnniu[j].className = "region-top-a-two";
            regionDiv[j].removeAttribute('id');
        }
        this.className = "region-top-a-one";
        num = this.getAttribute('data-index');
        regionDiv[num].id = "region-left-fonter-ul";
    }
    // 定时器 每1.5秒变换
    var timeId = setInterval(function () {
        for (var j = 0; j < regionAnniu.length; j++) {
            regionAnniu[j].className = "region-top-a-two";
            regionDiv[j].removeAttribute('id');
        }
        if (num == regionAnniu.length - 1) {
            num = -1;
        }
        num++;
        regionAnniu[num].className = "region-top-a-one";
        regionDiv[num].id = "region-left-fonter-ul";
    }, 1500);
    // 鼠标移入 让定时器停止
    function regionMouseover() {
        clearInterval(timeId);
    }
    // 鼠标移出 让定时器开启
    function regionMouseout() {
        timeId = setInterval(function () {
            for (var j = 0; j < regionAnniu.length; j++) {
                regionAnniu[j].className = "region-top-a-two";
                regionDiv[j].removeAttribute('id');
            }
            if (num == regionAnniu.length - 1) {
                num = -1;
            }
            num++;
            regionAnniu[num].className = "region-top-a-one";
            regionDiv[num].id = "region-left-fonter-ul";
        }, 1500);
    }
}
regionRight();
// 地区选择 结束

// 全国热门巡演 开始

// 全国热门巡演 开始
function tour() {
    var tourContentLi = document.querySelectorAll('.tour-content li');
    var tourContentRed = document.querySelectorAll('.tour-content-red');
    var tourContentP = document.querySelectorAll('.tour-content-zi');
    for (var i = 0; i < tourContentLi.length; i++) {
        tourContentLi[i].setAttribute('data-tour', i);
        tourContentLi[i].onmouseover = function () {
            if (tourContentP[this.getAttribute('data-tour')].style.left >= "0px") {
                tourContentP[this.getAttribute('data-tour')].style.left = "-350px";
            }
            animate1(tourContentRed[this.getAttribute('data-tour')], {
                "opacity": 0.9
            });
            animate1(tourContentP[this.getAttribute('data-tour')], {
                "left": 0
            });

        }
        tourContentLi[i].onmouseout = function () {
            animate1(tourContentRed[this.getAttribute('data-tour')], {
                "opacity": 0
            });
            animate1(tourContentP[this.getAttribute('data-tour')], {
                "left": 350
            });


        }
    }
}
tour();

// 全国热门巡演 结束

// 演唱会 开始
function concert() {
    var one = document.querySelector('.concert .classOpera .concert-left-tail-one .concert-left-tail-one-one');
    var two = document.querySelector('.concert .classOpera .concert-left-tail-one .concert-left-tail-one-two');
    var concertOne = document.querySelectorAll(".concert .concert-left-tail-one li a");
    var concertSpan = document.querySelectorAll(".concert .concert-left-tail-one li span");
    var concertLefttTailTwo = document.querySelectorAll('.concert .concert-left-tail-two');
    for (var i = 0; i < concertOne.length; i++) {
        concertOne[i].setAttribute("data-concert", i);
        concertOne[i].onclick = concertClick;
        // if (concertOne[i].className != "concert-left-tail-one-one") {
        //     concertOne[i].onmouseover = concertMouseover;
        //     concertOne[i].onmouseout = concertMouseout;
        // }
    }

    function concertClick() {
        for (var j = 0; j < concertOne.length; j++) {
            concertOne[j].className = "concert-left-tail-one-two";
            concertSpan[j].style.color = "#727272";
            concertLefttTailTwo[j].id = "concert-left-tail-two";
        }
        this.className = "concert-left-tail-one-one";
        concertSpan[this.getAttribute('data-concert')].style.color = "#ba1414";
        concertLefttTailTwo[this.getAttribute('data-concert')].id = '';
    };
    // function concertMouseover() {
    //     this.className = "concert-left-tail-one-one";
    //     concertSpan[this.getAttribute('data-concert')].style.color = "#ba1414";
    // };
    // function concertMouseout() {


    //     // if (this.className == "concert-left-tail-one-two") {

    //         // this.className = "concert-left-tail-one-one";

    //     // } else {
    //         this.className = "concert-left-tail-one-two";
    //         concertSpan[this.getAttribute('data-concert')].style.color = "#727272";
    //     // }
    // };
}
concert();
// 演唱会 结束

// 话剧舞台剧 开始
function modern() {
    var concertOne = document.querySelectorAll(".modern .concert-left-tail-one li a");
    var concertSpan = document.querySelectorAll(".modern .concert-left-tail-one li span");
    var concertLefttTailTwo = document.querySelectorAll('.modern .concert-left-tail-two');
    // console.log(concertOne);
    // var a = null;
    for (var i = 0; i < concertOne.length; i++) {
        concertOne[i].setAttribute("data-concert", i);
        concertOne[i].onclick = concertClick;
        // concertOne[i].onmouseover = function () {
        //     for (var j = 0; j < concertOne.length; j++) {
        //         // if (concertOne[j].className == "concert-left-tail-one-one") {
        //         //     // console.log(this.className);
        //         //     this.className = "concert-left-tail-one-one";
        //         // }
        //         concertOne[j].className = "concert-left-tail-one-two";
        //         concertSpan[j].style.color = "#727272";
        //     }
        //     this.className = "concert-left-tail-one-one";
        //     concertSpan[this.getAttribute('data-concert')].style.color = "#ba1414";
        // };
        // concertOne[i].onmouseout = function () {
        //     // for (var j = 0; j < concertOne.length; j++) {

        //     //     this.className = "concert-left-tail-one-two";
        //     //     concertSpan[j].style.color = "";
        //     // }
        //     // if (a == "concert-left-tail-one-one") {
        //     //     this.className = a;
        //     //     console.log(a);
        //     // }
        //     this.className = "concert-left-tail-one-two";
        // };

    }

    function concertClick() {
        for (var j = 0; j < concertOne.length; j++) {
            concertOne[j].className = "concert-left-tail-one-two";
            concertSpan[j].style.color = "#727272";
            concertLefttTailTwo[j].id = "concert-left-tail-two";
        }
        this.className = "concert-left-tail-one-one";
        concertSpan[this.getAttribute('data-concert')].style.color = "#8f13a2";
        concertLefttTailTwo[this.getAttribute('data-concert')].id = '';

        var a = this.className;
        console.log(a);
    }

}
modern();
// 话剧舞台剧 结束

// 音乐&舞蹈 开始
function classMusic() {
    var concertOne = document.querySelectorAll(".classMusic .concert-left-tail-one li a");
    var concertSpan = document.querySelectorAll(".classMusic .concert-left-tail-one li span");
    var concertLefttTailTwo = document.querySelectorAll('.classMusic .concert-left-tail-two');
    for (var i = 0; i < concertOne.length; i++) {
        concertOne[i].setAttribute("data-concert", i);
        concertOne[i].onclick = concertClick;
        // concertOne[i].onmouseover = function () {
        //     for (var j = 0; j < concertOne.length; j++) {
        //         // if (concertOne[j].className == "concert-left-tail-one-one") {
        //         //     // console.log(this.className);
        //         //     this.className = "concert-left-tail-one-one";
        //         // }
        //         concertOne[j].className = "concert-left-tail-one-two";
        //         concertSpan[j].style.color = "#727272";
        //     }
        //     this.className = "concert-left-tail-one-one";
        //     concertSpan[this.getAttribute('data-concert')].style.color = "#ba1414";
        // };
        // concertOne[i].onmouseout = function () {
        //     // for (var j = 0; j < concertOne.length; j++) {

        //     //     this.className = "concert-left-tail-one-two";
        //     //     concertSpan[j].style.color = "";
        //     // }
        //     // if (a == "concert-left-tail-one-one") {
        //     //     this.className = a;
        //     //     console.log(a);
        //     // }
        //     this.className = "concert-left-tail-one-two";
        // };

    }

    function concertClick() {
        for (var j = 0; j < concertOne.length; j++) {
            concertOne[j].className = "concert-left-tail-one-two";
            concertSpan[j].style.color = "#727272";
            concertLefttTailTwo[j].id = "concert-left-tail-two";
        }
        this.className = "concert-left-tail-one-one";
        concertSpan[this.getAttribute('data-concert')].style.color = "#4066bc";
        concertLefttTailTwo[this.getAttribute('data-concert')].id = '';
    }

}
classMusic();
// 音乐&舞蹈 结束

// 戏曲&综艺 开始
function classOpera() {
    var concertOne = document.querySelectorAll(".classOpera .concert-left-tail-one li a");
    var concertSpan = document.querySelectorAll(".classOpera .concert-left-tail-one li span");
    var concertLefttTailTwo = document.querySelectorAll('.classOpera .concert-left-tail-two');
    // console.log(concertOne);
    // var a = null;
    for (var i = 0; i < concertOne.length; i++) {
        concertOne[i].setAttribute("data-concert", i);
        concertOne[i].onclick = concertClick;
        // concertOne[i].onmouseover = function () {
        //     for (var j = 0; j < concertOne.length; j++) {
        //         // if (concertOne[j].className == "concert-left-tail-one-one") {
        //         //     // console.log(this.className);
        //         //     this.className = "concert-left-tail-one-one";
        //         // }
        //         concertOne[j].className = "concert-left-tail-one-two";
        //         concertSpan[j].style.color = "#727272";
        //     }
        //     this.className = "concert-left-tail-one-one";
        //     concertSpan[this.getAttribute('data-concert')].style.color = "#ba1414";
        // };
        // concertOne[i].onmouseout = function () {
        //     // for (var j = 0; j < concertOne.length; j++) {

        //     //     this.className = "concert-left-tail-one-two";
        //     //     concertSpan[j].style.color = "";
        //     // }
        //     // if (a == "concert-left-tail-one-one") {
        //     //     this.className = a;
        //     //     console.log(a);
        //     // }
        //     this.className = "concert-left-tail-one-two";
        // };

    }

    function concertClick() {
        for (var j = 0; j < concertOne.length; j++) {
            concertOne[j].className = "concert-left-tail-one-two";
            concertSpan[j].style.color = "#727272";
            concertLefttTailTwo[j].id = "concert-left-tail-two";
        }
        this.className = "concert-left-tail-one-one";
        concertSpan[this.getAttribute('data-concert')].style.color = "#f2825d";
        concertLefttTailTwo[this.getAttribute('data-concert')].id = '';

        var a = this.className;
        console.log(a);
    }

}
classOpera();
// 戏曲&综艺 结束

// 儿童亲子 开始
function classChild() {
    var one = document.querySelector('.classChild .concert-left-tail-one .concert-left-tail-one-one');
    var two = document.querySelector('.classChild .concert-left-tail-one .concert-left-tail-one-two')
    var concertOne = document.querySelectorAll(".classChild .concert-left-tail-one li a");
    var concertSpan = document.querySelectorAll(".classChild .concert-left-tail-one li span");
    var concertLefttTailTwo = document.querySelectorAll('.classChild .concert-left-tail-two');
    // console.log(concertOne);
    // var a = null;
    for (var i = 0; i < concertOne.length; i++) {
        concertOne[i].setAttribute("data-concert", i);
        concertOne[i].onclick = concertClick;
        // concertOne[i].onmouseover = function () {
        //     for (var j = 0; j < concertOne.length; j++) {
        //         // if (concertOne[j].className == "concert-left-tail-one-one") {
        //         //     // console.log(this.className);
        //         //     this.className = "concert-left-tail-one-one";
        //         // }
        //         concertOne[j].className = "concert-left-tail-one-two";
        //         concertSpan[j].style.color = "#727272";
        //     }
        //     this.className = "concert-left-tail-one-one";
        //     concertSpan[this.getAttribute('data-concert')].style.color = "#ba1414";
        // };
        // concertOne[i].onmouseout = function () {
        //     // for (var j = 0; j < concertOne.length; j++) {

        //     //     this.className = "concert-left-tail-one-two";
        //     //     concertSpan[j].style.color = "";
        //     // }
        //     // if (a == "concert-left-tail-one-one") {
        //     //     this.className = a;
        //     //     console.log(a);
        //     // }
        //     this.className = "concert-left-tail-one-two";
        // };

    }

    function concertClick() {
        if (this.className == "concert-left-tail-one-two") {
            for (var j = 0; j < concertOne.length; j++) {
                concertSpan[j].style.color = "#727272";
                concertLefttTailTwo[j].id = "concert-left-tail-two";
            }
            this.style.backgroundPositionX = "-120px";
            one.style.backgroundPositionX = '-40px';
            concertSpan[this.getAttribute('data-concert')].style.color = "#d7932f";
            concertLefttTailTwo[this.getAttribute('data-concert')].id = '';
        } else {
            for (var j = 0; j < concertOne.length; j++) {
                // concertOne[j].className = "concert-left-tail-one-two";
                concertSpan[j].style.color = "#727272";
                concertLefttTailTwo[j].id = "concert-left-tail-two";
            }
            this.style.backgroundPositionX = "0px";
            two.style.backgroundPositionX = '-80px';
            concertSpan[this.getAttribute('data-concert')].style.color = "#d7932f";
            concertLefttTailTwo[this.getAttribute('data-concert')].id = '';
        }
    }

}
classChild();
// 儿童亲子 结束

// 体育赛事 开始
function classSports() {
    var concertOne = document.querySelectorAll(".classSports .concert-left-tail-one li a");
    var concertSpan = document.querySelectorAll(".classSports .concert-left-tail-one li span");
    var concertLefttTailTwo = document.querySelectorAll('.classSports .concert-left-tail-two');
    // console.log(concertOne);
    // var a = null;
    for (var i = 0; i < concertOne.length; i++) {
        concertOne[i].setAttribute("data-concert", i);
        concertOne[i].onclick = concertClick;
        // concertOne[i].onmouseover = function () {
        //     for (var j = 0; j < concertOne.length; j++) {
        //         // if (concertOne[j].className == "concert-left-tail-one-one") {
        //         //     // console.log(this.className);
        //         //     this.className = "concert-left-tail-one-one";
        //         // }
        //         concertOne[j].className = "concert-left-tail-one-two";
        //         concertSpan[j].style.color = "#727272";
        //     }
        //     this.className = "concert-left-tail-one-one";
        //     concertSpan[this.getAttribute('data-concert')].style.color = "#ba1414";
        // };
        // concertOne[i].onmouseout = function () {
        //     // for (var j = 0; j < concertOne.length; j++) {

        //     //     this.className = "concert-left-tail-one-two";
        //     //     concertSpan[j].style.color = "";
        //     // }
        //     // if (a == "concert-left-tail-one-one") {
        //     //     this.className = a;
        //     //     console.log(a);
        //     // }
        //     this.className = "concert-left-tail-one-two";
        // };

    }

    function concertClick() {
        for (var j = 0; j < concertOne.length; j++) {
            concertOne[j].className = "concert-left-tail-one-two";
            concertSpan[j].style.color = "#727272";
            concertLefttTailTwo[j].id = "concert-left-tail-two";
        }
        this.className = "concert-left-tail-one-one";
        concertSpan[this.getAttribute('data-concert')].style.color = "#37a13e";
        concertLefttTailTwo[this.getAttribute('data-concert')].id = '';

    }

}
classSports();
// 体育赛事 结束

// 热门 开始
function seo() {
    var seoI = document.querySelector('.seo_inner');
    var seoIi = document.querySelector('.seo i');
    // console.log(1);
    if (seoI.style.display == 'none') {
        seoI.style.display = 'block';
        seoIi.style.backgroundPositionY = "-30px";
    } else {
        seoI.style.display = 'none';
        seoIi.style.backgroundPositionY = "0px";
    }
}
seo();
// 热门 结束